<!--
 * @Description:
 * @Author: hui
 * @Date: 2022-02-18 10:58:56
 * @LastEditTime: 2022-03-31 09:28:26
-->
<template>
	<div class="panel">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="挂牌信息" name="first">
        <ul class="list">
          <li v-for="item in props.data" :key="item.id">
            <div class="img"><img :src="item.img" /></div>
            <div class="content">
              <h5>{{ item.title }}</h5>
              <p>{{ item.time }}</p>
            </div>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="成交信息" name="second">
        <ul class="list">
          <li v-for="item in props.data" :key="item.id">
            <div class="img"><img :src="item.img" /></div>
            <div class="content">
              <h5>{{ item.title }}</h5>
              <p>{{ item.time }}</p>
            </div>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
const props = defineProps(['data'])

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

</script>

<style lang="scss" scoped>
.panel {
  height: 478px;
  margin-top: 20px;
  // padding: 0 20px;
  background: #FFFFFF;
  box-shadow: 0px 2px 4px 0px rgba(28,41,90,0.04);
  border-radius: 10px;
  .list {
    li {
      display: flex;
      align-items: center;
      height: 80px;
      border-top: 1px solid rgba(28,41,90,0.04);
      &:hover {
        background-color: #F4FAFF;
      }
      .img {
        width: 38px;
        height: 38px;
        margin: 0 20px 0 38px;
        img {
          width: 100%;
        }
      }
      .content {
        h5 {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #242F57;
          line-height: 22px;
        }
        .time {
          font-size: 12px;
          font-family: PingFangSC-Medium, PingFang SC;
          color: #636E95;
        }
      }
    }
  }
}
</style>
<style>
.el-tabs {
  margin: 0 !important;
}
.el-tabs__header {
  margin: 0 !important;
}
.demo-tabs > .el-tabs__content {
  padding: 0;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.el-tabs__nav {
  padding-left: 24px;
}
.el-tabs__active-bar {
  display: none;
}
.el-tabs__nav-wrap::after {
  display: none;
}
.el-tabs__item {
  font-size: 22px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;  
  color: #242F57;
  height: 70px;
  line-height: 70px;
}
.el-tabs .el-tabs__item:hover,
.el-tabs .el-tabs__item.is-active {
  color: #0A84FF !important;
}
</style>
